@charset 'UTF-8';
@import '../common/_functions.scss';
@import '../common/_variables.scss';

// 图标
.pay_icon
{
    display: inline-block;

    width: 1.50667rem;
    height: 1.50667rem;

    background-image: url('/resources/img/pay.png');
    background-repeat: no-repeat;
    background-size: 3.41333rem 1.50667rem;
}
.done_icon
{
    background-position: 0 0;
}
.fail_icon
{
	height: 1.71667rem;
    background-position: -1.70667rem 0;
}


.pay_container
{
    padding: px2rem(100) 0;

    text-align: center;
    .pay_msg
    {
        font-size: px2rem(36);

        margin-top: px2rem(20);

        color: $_333;
    }
}


.pay_info
{
    font-size: px2rem(30);

    position: relative;

    padding: px2rem(20) 0 px2rem(30) px2rem(60);

    color: $_333;
    border: none;
    > div
    {
        margin-top: px2rem(10);

        letter-spacing: 1px;
    }
    &:after
    {
        position: absolute;
        top: 0;
        left: 0;

        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        width: 200%;
        height: 200%;

        content: '';
        -webkit-transform: scale(.5);
                transform: scale(.5);
        -webkit-transform-origin: left top;
                transform-origin: left top;

        border-width: 1px 0;
        border-style: solid;
        border-color: $_ccc;
    }
}


.pay_btn
{
    position: absolute;
    right: 0;
    bottom: px2rem(100);
    left: 0;

    display: flex;

    padding: 0 px2rem(30);
    div
    {
        text-align: right;

        flex: 1;
        &:first-child
        {
            text-align: left;
        }
    }
    button
    {
        font-size: px2rem(30);

        width: px2rem(320);
        height: px2rem(70);

        border: 1px solid currentColor;
        border-radius: px2rem(5);
    }
    .view_btn
    {
        color: $_fff;
        background-color: $_03a9f4;
    }
    .back_btn
    {
        color: $_03a9f4;
        background-color: $_fff;
    }
}
